<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="header" style="width: 100%">
      <span class="header-title"> 班组考勤分析 </span>
    </div>
    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <div id="analysisChart" :style="{ height, width }" />
      </el-col>
    </el-row>
    <!-- card body -->
  </el-card>
  <div></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const width = "100%";
const height = "400px";

const props = defineProps({
  groupNames: {
    type: Array<String>,
    default() {
      return [];
    },
  },
  checkinPersonCount: {
    type: Array<Number>,
    default() {
      return [];
    },
  },
  absenceFromDutyPersonCount: {
    type: Array<Number>,
    default() {
      return [];
    },
  },
  onDutyRate: {
    type: Array<Number>,
    default() {
      return [];
    },
  },
});

// 初始化图表
const initChart = () => {
  let groupNames = ref(props.groupNames);
  let checkinPersonCount = ref(props.checkinPersonCount);
  let absenceFromDutyPersonCount = ref(props.absenceFromDutyPersonCount);
  let onDutyRate = ref(props.onDutyRate);

  let options = {
    xAxis: {
      data: groupNames.value,
    },
    yAxis: [
      {
        type: "value",
        name: "",
        minInterval: 1,
      },
      {
        type: "value",
        name: "到岗率",
        show: false,
      },
    ],
    legend: {
      top: "top",
      textStyle: {
        color: "#999",
      },
    },
    series: [
      {
        name: "出勤人数",
        type: "bar",
        data: checkinPersonCount.value,
        color: "#5182E4",
      },
      {
        name: "缺勤人数",
        type: "bar",
        data: absenceFromDutyPersonCount.value,
        color: "#F7CB4A",
      },
      {
        name: "到岗率",
        type: "line",
        yAxisIndex: 1,
        data: onDutyRate.value,
        color: "#EE8947",
      },
    ],
  };
  let chart = echarts.init(
    document.getElementById("analysisChart") as HTMLDivElement
  );
  chart.setOption(options);
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

onUpdated(() => {
  initChart();
});
</script>

<style lang="scss" scoped>
.pt20 {
  padding-top: 20px;
}

.header-title {
  font-size: 16px;
  color: #101010;
  font-weight: 600;
}

.header-description {
  font-size: 14px;
  color: #a3a3a3;
}
</style>
